
import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl} from './intl';
import {Card, Row, Col, Table, Popover} from 'antd';
import {FILES_API, TABLE, DATE_FORMAT} from '../constants';
import {formatDateTime, conventEnumValueToString, uuid, exportDownload} from '../utils';
import {consultType, technicalSupportTransmissionType} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
const {Description} = DescriptionList;
import styles from './style.css';
/* eslint-disable react/prefer-stateless-function */
class Detail extends React.PureComponent {
    render() {
        const {details = [], attachments = []} = this.props.detail;
        const fileList = attachments.map(item => (<Description key={item.fileId}><a icon="download" href={`${FILES_API.files}/${item.fileId}`} size="small">
            {item.fileName}</a></Description>));
        const newDetails = details.map((item, index) => Object.assign(item, {id: uuid(),
            no: index + 1}));
        const columns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.no',
                    defaultMessage: '序号'
                }),
                dataIndex: 'no',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.replyDate',
                    defaultMessage: '回复日期'
                }),
                dataIndex: 'replyDate',
                render: text => formatDateTime(text, DATE_FORMAT)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.source',
                    defaultMessage: '来源'
                }),
                dataIndex: 'source',
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.replyName',
                    defaultMessage: '回复人名称'
                }),
                dataIndex: 'replyName',
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.replyComments',
                    defaultMessage: '回复意见/再上报原因'
                }),
                dataIndex: 'replyComments',
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.action',
                    defaultMessage: '操作'
                }),
                dataIndex: 'action',
                render: (text, record) => {
                    const {attachments = []} = record;
                    if(!attachments.length)
                        return '';
                    const fileList = attachments.map(item => (<Description key={item.fileId}><a icon="download" href={`${FILES_API.files}/${item.fileId}`} size="small">
                        {item.fileName}</a></Description>));
                    return (<Popover trigger="click" content={<DescriptionList col={1} size="large">
                        {fileList}
                    </DescriptionList>}>
                        <a icon="download" size="small">
                            {this.props.intl.formatMessage({
                                id: 'add.downloadFile',
                                defaultMessage: '下载附件'
                            })}</a>
                    </Popover>);
                }
            }
        ];
   
        return (
            <div>
                <Card>
                    <DescriptionList size="large" title={<Row><Col span={6}>{this.props.intl.formatMessage({
                        id: 'commonDetail.order.title',
                        defaultMessage: '单据信息'
                    })}</Col>
                    <Col className={styles.optionBtn} span={18}>{this.props.operations}</Col></Row>}>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.code',
                                defaultMessage: '编号'
                            })}>
                            {this.props.detail.code}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.brandCode',
                                defaultMessage: '品牌'
                            })}>
                            {this.props.detail.brandCode}
                        </Description>
                        {!this.props.isDealerUser && [<Description
                            key="dealerCode"
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.dealerCode',
                                defaultMessage: '总代编号'
                            })}>
                            {this.props.detail.dealerCode}
                        </Description>,
                        <Description
                            key="dealerName"
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.dealerName',
                                defaultMessage: '总代名称'
                            })}>
                            {this.props.detail.dealerName}
                        </Description>,
                        <Description
                            key="subDealer"
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.subDealer',
                                defaultMessage: '经销商'
                            })}>
                            {`${this.props.detail.subDealerCode}(${this.props.detail.subDealerName})`}
                        </Description>]}
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.email',
                            defaultMessage: '邮箱',
                        })}>{this.props.detail.email}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.telPhone',
                            defaultMessage: '联系电话',
                        })}>{this.props.detail.telPhone}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.createTime',
                            defaultMessage: '创建时间'
                        })}>{formatDateTime(this.props.detail.createTime, DATE_FORMAT)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.creatorName',
                            defaultMessage: '创建人姓名',
                        })}>{this.props.detail.creatorName}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.vin',
                            defaultMessage: 'vin',
                        })}>{this.props.detail.vin}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.engineCode',
                            defaultMessage: '发动机号',
                        })}>{this.props.detail.engineCode}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.engineModel',
                            defaultMessage: '发动机型号',
                        })}>{this.props.detail.engineModel}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.transmissionSn',
                            defaultMessage: '变速箱号',
                        })}>{this.props.detail.transmissionSn}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.productionDate',
                            defaultMessage: '生产日期'
                        })}>{formatDateTime(this.props.detail.productionDate, DATE_FORMAT)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.saleDate',
                            defaultMessage: '销售日期'
                        })}>{formatDateTime(this.props.detail.saleDate, DATE_FORMAT)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.productCategoryCode',
                            defaultMessage: '车型编号',
                        })}>{this.props.detail.productCategoryCode}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.annoucementNumber',
                            defaultMessage: '公告号',
                        })}>{this.props.detail.annoucementNumber}</Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.consultType',
                                defaultMessage: '咨询类型'
                            })}>
                            {conventEnumValueToString(consultType, this.props.detail.consultType)}
                        </Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.faultDate',
                            defaultMessage: '故障日期'
                        })}>{formatDateTime(this.props.detail.faultDate, DATE_FORMAT)}</Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.faultItemId',
                                defaultMessage: '故障代码'
                            })}>
                            {`${this.props.detail.faultItemCode}(${this.props.detail.faultItemName})`}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.supplierId',
                                defaultMessage: '供应商'
                            })}>
                            {`${this.props.detail.supplierCode}(${this.props.detail.supplierName})`}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.transmissionType',
                                defaultMessage: '变速器类型'
                            })}>
                            {conventEnumValueToString(technicalSupportTransmissionType, this.props.detail.transmissionType)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.faultDescription',
                                defaultMessage: '故障描述'
                            })}>
                            {this.props.detail.faultDescription}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.measureEffects',
                                defaultMessage: '已采取措施及效果'
                            })}>
                            {this.props.detail.measureEffects}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.suggestion',
                                defaultMessage: '相关建议'
                            })}>
                            {this.props.detail.suggestion}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.analysisResults',
                                defaultMessage: '分析结果'
                            })}>
                            {this.props.detail.analysisResults}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.dealMethod',
                                defaultMessage: '处理方式'
                            })}>
                            {this.props.detail.dealMethod}
                        </Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.submitTime',
                            defaultMessage: '提交时间'
                        })}>{formatDateTime(this.props.detail.submitTime, DATE_FORMAT)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.handleTime',
                            defaultMessage: '处理时间'
                        })}>{formatDateTime(this.props.detail.handleTime, DATE_FORMAT)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.data.closeTime',
                            defaultMessage: '关闭时间'
                        })}>{formatDateTime(this.props.detail.closeTime, DATE_FORMAT)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'detailPanel.operation.isTransferTechnicalCase',
                            defaultMessage: '是否转技术案例'
                        })}>
                            {this.props.detail.isTransferTechnicalCase ? '是' : '否'}
                        </Description>
                    </DescriptionList>
                </Card>
                
                <Card
                    // extra={<ImagePreviewBtn attachments={attachments} />}
                    title={this.props.intl.formatMessage({
                        id: 'commonDetail.attachments.title',
                        defaultMessage: '附件清单'
                    })}
                    bordered={false}>
                    {fileList.length ? <DescriptionList col={1} size="large">
                        {fileList}
                    </DescriptionList> : this.props.intl.formatMessage({
                        id: 'commonDetail.attachments.noData',
                        defaultMessage: '暂无附件'
                    })}
                </Card>
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'commonDetail.details.title',
                        defaultMessage: '技术支持回复情况清单'
                    })}
                    bordered={false}>
                    <Table
                        className="white-space-nowrap"
                        rowKey="id"
                        columns={columns}
                        pagination={false}
                        dataSource={newDetails} {...TABLE} />
                </Card>
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
    isDetail: false,
    isDealerUser: true,
};

Detail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    isDealerUser: PropTypes.bool,
    isDetail: PropTypes.bool,
    operations: PropTypes.any
};
export default injectIntl(Detail);
